﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style media="screen">
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            width: 100%;
            height:100%;
        }
        #div1 {
            width: 50px;
            height: 50px;
            background: cyan;
            position: absolute;
	          background: #cacaca66;
            background-color: rgba(202, 202, 202, 0.4);
        }
    </style>
</head>
<body>
  <div id="div1" style="left: 50%; top: 50%;">标记</div>
<script type="text/javascript">
          var div1=document.querySelector('#div1');
          var maxW=document.body.clientWidth-div1.offsetWidth;
          var maxH=document.body.clientHeight-div1.offsetHeight;

    div1.addEventListener('touchstart',function(e){
        var ev = e || window.event;
        var touch = ev.targetTouches[0];
        oL = touch.clientX - div1.offsetLeft;
        oT = touch.clientY - div1.offsetTop;
        document.addEventListener("touchmove",defaultEvent,false);
    })


    div1.addEventListener('touchmove',function(e){
        var ev = e || window.event;
       var touch = ev.targetTouches[0];
       var oLeft = touch.clientX - oL;
       var oTop = touch.clientY - oT;
       if(oLeft<0){
           oLeft=0;
       }else if (oLeft>=maxW) {
           oLeft=maxW/document.body.clientWidth*100;
       }
       if(oTop<0){
           oTop=0;
       }else if (oTop>=maxH) {
           oTop=maxH/document.body.clientHeight*100;
       }

       div1.style.left = oLeft + '%';
       div1.style.top = oTop + '%';

    })
    div1.addEventListener('touchend',function(){ 
       document.removeEventListener("touchmove",defaultEvent);
    })
    function defaultEvent(e) {


       e.preventDefault();
     }
     
</script>
</body>
</html>